<!--
 * @Author: LiuYan
 * @Date: 2022-12-21 14:24:38
 * @LastEditors: LiuYan
 * @LastEditTime: 2023-01-04 10:33:17
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./common/css/coommon.css" />
  </head>
  <body>
    <div id="app" class="requirementListOfSchemeDesignDraftNext">
      <div class="template">
        <img src="./common/img/common/template.png" />&ensp;下载模版
      </div>
      <div class="table_custom">
        <div class="header tr">
          <div class="td" style="width: 10%">序号</div>
          <div class="td" style="width: 15%">需求模版</div>
          <div class="td" style="width: 75%">功能描述</div>
        </div>
        <div>
          <div class="tr">
            <div class="td" style="width: 10%">1</div>
            <div class="td" style="width: 15%">
              <input />
            </div>
            <div class="td" style="width: 75%">
              <input />
            </div>
          </div>
        </div>
      </div>
      <br />
      <button class="button_primary_text">
        <img src="./common/img/common/add.png" />&ensp;继续添加
      </button>
      <br />
      <button class="button_success_plain">受理单</button>
      &ensp;
      <button @click="onUpload" class="button_success">&ensp;附件&ensp;</button>
      <input style="display: none" v-model="url" prop="url" />&ensp;{{textUrl}}
    </div>
  </body>
  <script src="./common/js/vue.js"></script>
  <script type="module">
    const { createApp } = Vue;
    const app = createApp({
      data() {
        return {
          url: "",
          textUrl: "",
        };
      },
      methods: {
        onUpload() {
          const input = document.createElement("input");
          input.type = "file";
          document.body.appendChild(input);
          input.click();
          // 上传结束之后，删除此图标
          input.remove();
          input.onchange = function (val) {
            const filePath = val.target.files[0];
            const formData = new FormData();
            formData.append("file", filePath);
            // ajax之后在赋值
            this.url = filePath.name;
            this.textUrl = filePath.name;
          }.bind(this);
        },
      },
    }).mount("#app");
  </script>
</html>
